<template>
  <div v-if="prodList.length > 0" class="bgc-white p16 flex" style="align-items: flex-start">
    <div style="width: 520px">
      <div class="title-block mb16">企业服务选择</div>
      <ConfigItem
        v-for="(item, idx) in picsArr"
        :key="`${item.id || 'new'}_${idx}`"
        :target="item"
        :options="prodList"
        @del="onPicDel(idx)"
        @edit="onPicEdit($event, idx)"
      />
      <ConfigItem
        v-for="(item, idx) in tempPicsArr"
        :key="`${item.id || 'new'}_${idx}`"
        :target="item"
        :options="prodList"
        @del="onPicTempDel(idx)"
        @add="onPicTempAdd($event, idx)"
      />
      <div class="ta-center">
        <a-button v-if="theLen < 4" type="primary" @click="addItem">添加</a-button>
      </div>
    </div>
    <div class="pl24" style="border-left: 1px solid #e8e8e8">
      <div class="title-block mb16">小程序预览</div>
      <div class="preview">
        <div v-if="showCarousel" class="preview-inner">
          <a-carousel autoplay>
            <div v-for="li in picsArr" :key="li.id" style="width: 343px; height: 120px">
              <img :src="li.banner" style="width: 100%; height: 100%" />
            </div>
          </a-carousel>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="bgc-white p16 flex-center-center" style="height: calc(100vh - 112px)">
    <a-empty v-if="prodLoaded">
      <template slot="description">
        <div>抱歉，暂无企业服务</div>
        <div class="mt12">
          <a-button type="primary" @click="$router.push('/admin/productList')">添加企业服务</a-button>
        </div>
      </template>
    </a-empty>
    <a-empty v-else>加载中...</a-empty>
  </div>
</template>
<script>
import ConfigItem from "./configItem.vue";
export default {
  name: "",
  components: { ConfigItem },
  mixins: [],
  props: {},
  data() {
    return {
      picsArr: [],
      tempPicsArr: [],
      prodList: [],
      prodLoaded: false,
      showCarousel: true
    };
  },
  computed: {
    theLen() {
      return this.picsArr.length + this.tempPicsArr.length;
    }
  },
  watch: {},
  created() {
    this.loadProds();
    this.loadBanners();
  },
  mounted() {},
  methods: {
    loadProds() {
      this.$request({
        url: `/hr/api/v1/products/selectBySite`,
        params: {
          productTypeId: "0"
        }
      })
        .then((res) => {
          this.prodList = res.data.map((item) => ({
            value: item.id,
            label: item.productName,
            disabled: item.isBanner
          }));
          this.prodLoaded = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onPicEdit(data) {
      this.$request({
        url: `/hr/api/v1/productBanners`,
        method: "put",
        data
      })
        .then((res) => {
          this.loadProds();
          this.loadBanners();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onPicTempAdd(data, idx) {
      this.$request({
        url: `/hr/api/v1/productBanners`,
        method: "post",
        data
      })
        .then((res) => {
          this.loadProds();
          this.loadBanners();
          const temp = [...this.tempPicsArr];
          temp.splice(idx, 1);
          this.tempPicsArr = temp;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onPicDel(idx) {
      this.$request({
        url: `/hr/api/v1/productBanners/${this.picsArr[idx]["id"]}`,
        method: "delete"
      })
        .then(() => {
          this.loadProds();
          this.loadBanners();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onPicTempDel(idx) {
      const temp = [...this.tempPicsArr];
      temp.splice(idx, 1);
      this.tempPicsArr = temp;
    },
    loadBanners() {
      this.$request({
        url: "/hr/api/v1/productBanners/selectBySite"
      })
        .then((res) => {
          this.picsArr = res.data || [];
          this.showCarousel = false;
          this.$nextTick(() => {
            this.showCarousel = true;
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addItem() {
      this.tempPicsArr = [
        ...this.tempPicsArr,
        {
          id: null,
          banner: "",
          productId: undefined
        }
      ];
    }
  }
};
</script>
<style lang="scss" scoped>
.preview {
  position: relative;
  width: 375px;
  height: 790px;
  background-size: 100% 100%;
  background-image: url("./bg.png");
  .preview-inner {
    position: absolute;
    top: 54px;
    left: 16px;
    width: 343px;
    height: 120px;
  }
}
</style>
